<template>
  <div class="login">
    <div class="img">
      <van-image
        round
        width="4rem"
        height="4rem"
        src="https://sqyfximage.oss-cn-qingdao.aliyuncs.com/zhmc/images/touxiang.png"
      />
    </div>

    <van-form>
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="padding-top: 20px;padding-left: 40px;padding-bottom: 10px;">
        <van-checkbox v-model="rememberMe" shape="square">
          记住密码
        </van-checkbox>
      </div>

      <div style="margin: 16px;padding-top: 10px;padding-bottom: 50px;">
        <van-button round block type="info" native-type="submit" @click="onSubmit">登录</van-button>
      </div>

    </van-form>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { Login } from '../api/api'
import Cookies from 'js-cookie'
import { encrypt, decrypt } from '../utils/jsencrypt'
import { getToken, setToken, removeToken } from '@/utils/auth'

export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: '',
      rememberMe: true
    }
  },

  created() {
    this.getCookie()
  },

  methods: {
    getCookie() {
      const username = Cookies.get('username')
      const password = Cookies.get('password')
      const rememberMe = Cookies.get('rememberMe')
      this.username = username === undefined ? this.username : username
      this.password = password === undefined ? this.password : decrypt(password)
      this.rememberMe = rememberMe === undefined ? false : Boolean(rememberMe)
    },

    onSubmit() {
      const username = this.username
      const password = this.password

      if (this.rememberMe) {
        Cookies.set('username', username, { expires: 30 })
        Cookies.set('password', encrypt(this.password), { expires: 30 })
        Cookies.set('rememberMe', this.rememberMe, { expires: 30 })
      } else {
        Cookies.remove('username')
        Cookies.remove('password')
        Cookies.remove('rememberMe')
      }

      const loginForm = { username: username, password: password }

      Login(loginForm).then(response => {
        if (response.code == 200) {
          const token = response.token
          setToken(token)
          this.$store.dispatch('setUserName', response.username)
          this.$store.dispatch('setUserId', response.userid)
          this.$router.push({ path: '/home', query: { }})
        } else if (response.code == 403) {
          this.$router.push({ path: '/home', query: { }})
        } else {
          console.log(response)
          Toast.fail(response.msg)
        }
      })
    },

    toRegister() {
      this.$router.push('/Register')
    },

    onchangeRememberMe(e) {
      console.log(e)
    }
  }
}

</script>

<style scoped>

  .login{
    width: 100%;
    height: calc(100vh);
    background-color: white;
  }

  .img{
    align-items: center;
    text-align:center;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .login{
    background-color: white;
    align-content: center;
    align-items: center;
  }
  .title {
    /* border-radius: 15px; */
    size:1px;
    height: 50px;
    line-height: 50px;
    background-color: #20a0ff;
    color: #fff;
    text-align: center;
  }

</style>

